<template>
  <div class="tree-container"
       v-loading="treeLoading">
    <div class="button-wrap"
         v-if="treeToolBar">
      <el-button class="btn-blue"
                 size="medium"
                 @click="handleAddTreeNode"
                 type="primary">新增</el-button>
      <el-button class="btn-green"
                 size="medium"
                 @click="handleEditTreeNode"
                 type="primary">修改</el-button>
      <el-button class="btn-red"
                 size="medium"
                 @click="handleDelTreeNode"
                 type="primary">删除</el-button>
    </div>
    <div class="title-wrap"
         v-if="title">
      <span class="split-line"></span>
      {{title}}{{cascadingVar?'：':''}}<el-checkbox @change="cascadingVarChange"
                   v-show="cascadingVar"
                   v-model="check">级联选择</el-checkbox>
    </div>
    <el-scrollbar :style="{height:title?'calc(100%-40)':treeToolBar?'calc(100% - 56px)':'100%'}">
      <el-tree ref="tree"
               :data="treeData"
               highlight-current
               :node-key="nodeKey"
               :check-strictly="checkStrictly"
               :check-on-click-node="isCheckClick"
               :expand-on-click-node="false"
               :default-expand-all="defaultExpandAll"
               :default-expanded-keys="defaultExpandedKeys"
               :props="defaultProps"
               :default-checked-keys="defaultCheckKeys"
               :show-checkbox="showCheckbox"
               @node-click="handleNodeClick"
               @check="handleCheckBoxClick"
               accordion></el-tree>
    </el-scrollbar>
  </div>
</template>
<script>
export default {
    data () {
        return {
            check: false
        };
    },
    props: {
        treeData: {
            //树数据
            type: Array
        },
        treeLoading: {
            //树loading状态
            type: Boolean,
            default: false
        },
        treeToolBar: {
            //是否显示新增修改删除按钮
            type: Boolean,
            default: true
        },
        defaultProps: {
            //默认树节点属性设置
            type: Object,
            default: () => {
                return {
                    children: 'children',
                    label: 'label'
                };
            }
        },
        nodeKey: {
            //指定唯一标识字段
            type: String,
            default: 'id'
        },
        showCheckbox: {
            //是否显示checkbox
            type: Boolean,
            default: false
        },
        checkStrictly: {
            // 遵循父子不互相关联的做法
            type: Boolean,
            default: false
        },
        defaultCheckKeys: {
            //默认checkbox选中
            type: Array,
            default: () => {
                return [];
            }
        },
        isSingle: {
            //checkbox  是否单选
            type: Boolean,
            default: false
        },
        isCheckClick: {
            //是否在点击节点的时候选中节点
            type: Boolean,
            default: true
        },
        defaultExpandAll: {
            //默认是否展开全部子节点
            type: Boolean,
            default: false
        },
        defaultExpandedKeys: {
            //默认展开指定子节点
            type: Array,
            default: () => {
                return [];
            }
        },
        title: {
            //树标题
            type: String,
            default: ''
        },
        cascadingVar: {
            type: Boolean,
            default: false
        }
    },

    watch: {
        treeData: {
            handler (newValue) {
                this.treeData = newValue;
            },
            deep: true,
            immediate: true
        },
        checkStrictly: {
            handler (newValue) {
                console.log(newValue);
                this.checkStrictly = newValue;
                this.check = !this.checkStrictly;
            },
            deep: true,
            immediate: true
        }
    },
    methods: {
    /**
     * 数节点点击事件
     * 默认参数共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。
     */
        handleNodeClick (data) {
            this.selectTree = data;
            this.$emit('handleTreeNodeClick', data);
            let nodeKey = this.nodeKey;
            this.$nextTick(() => {
                if (!this.showCheckbox) {
                    this.$refs.tree.setCurrentKey(data[nodeKey]);
                }
            });
        },
        handleCheckBoxClick (data) {
            this.selectTree = data;
            this.$emit('handleCheckBoxClick', data);
            let nodeKey = this.nodeKey;
            this.$nextTick(() => {
                if (this.isSingle) {
                    this.$refs.tree.setCheckedKeys([data[nodeKey]]);
                }
            });
        },
        /**
* 添加数节点
*/
        handleAddTreeNode () {
            this.$emit('handleAddTreeNode', this.selectTree);
        },
        /**
* 编辑树节点
*/
        handleEditTreeNode () {
            this.$emit('handleEditTreeNode', this.selectTree);
        },
        /**
* 删除树节点
*/
        handleDelTreeNode () {
            this.$emit('handleDelTreeNode', this.selectTree);
        },
        /** 
* 级联复选框值改变回调函数
*/
        cascadingVarChange (e) {
            this.$emit('update:checkStrictly', !e);
        }
    }
};
</script>
<style lang="scss">
.tree-container {
  width: 100%;
  height: 100%;
  min-width: 280px;
  overflow-y: auto;
  .el-scrollbar__view {
    margin-bottom: 40px;
    box-sizing: border-box;
  }
  .button-wrap {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .el-tree-node__label {
    @include ellipsis();
    text-align: left;
  }
  .title-wrap {
    text-align: left;
    font-size: 16px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    padding-left: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    border-bottom: 1px solid #dedede;
    margin-bottom: 10px;
    .title {
      padding-right: 10px;
    }
    .split-line {
      display: inline-block;
      background: #0089f3;
      width: 4px;
      height: 14px;
      border-radius: 2px;
      margin-right: 10px;
    }
  }
}
</style>